import React, {Component} from 'react';
import {Redirect, Route, Switch} from 'react-router-dom';
import MyNavLink from './components/MyNavLink/MyNavLink';
import About from './page/About';
import Home from './page/Home';

export class App extends Component {
	render() {
		return (
			<div>
				<div className="row">
					<div className="col-xs-offset-2 col-xs-8">
						<div className="page-header">
							<h2>React Router Demo</h2>
						</div>
					</div>
				</div>

				<div className="row">
					<div className="col-xs-2 col-xs-offset-2">
						<div className="list-group">
							{/* 原生跳转使用a标签跳转不同页面 */}
							{/* <a className="list-group-item" href="./about.html">
								About
							</a>
							<a className="list-group-item active" href="./home.html">
								Home
							</a> */}

							{/* 路由跳转 
								自己封装组件,通过props传入属性参数
							*/}
							<MyNavLink to="/about">about</MyNavLink>
							<MyNavLink to="/home">home</MyNavLink>
						</div>
					</div>
					<div className="col-xs-6">
						<div className="panel">
							<div className="panel-body">
								{/* 注册路由
									 Redirect当路由地址都不匹配的时候走Redirect中的to地址
								*/}
								<Switch>
									<Route path="/about" component={About} />
									<Route path="/home" component={Home} />
									<Redirect to="/home" />
								</Switch>
							</div>
						</div>
					</div>
				</div>
			</div>
		);
	}
}

export default App;
